<template>
  <div class="register-2">
    <h1>确认挂号信息</h1>
    <!--   展示就诊人信息-->
    <div class="card-1">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>请选择就诊人</span>
            <el-button type="primary" icon="Edit" @click="goToAddUser">添加就诊人</el-button>
          </div>
        </template>
        <!-- 展示就诊人列表组件：姓名、性别、年龄、联系方式、职业、科室、医生-->
        <div class="userinfo">
          <VisitorList
              @click="changeIndex(index)"
              class="user-item"
              v-for="(user, index) in userArr"
              :key="user.id"
              :user="user"
              :index="index"
              :currentIndex="currentIndex"
          />
        </div>
      </el-card>
    </div>

    <!-- 挂号信息 -->
    <div class="card-2">
      <el-card>
        <template #header><span>挂号信息</span></template>
        <div class="card-table">
          <el-descriptions
              class="margin-top"
              :column="2"
              border
          >
            <el-descriptions-item v-for="(item, index) in descriptionsData" :key="index">
              <template #label>
                <div class="cell-item">
                  <el-icon>
                    <component :is="item.icon"/>
                  </el-icon>
                  {{ item.label }}
                </div>
              </template>
              <el-tag v-if="item.tag" size="small">{{ item.content }}</el-tag>
              <p v-else-if="item.style" :style="item.style">{{ item.content }}</p>
              <span v-else>{{ item.content }}</span>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <template #footer>
          <div class="btn">
            <el-button type="primary"
                       :disabled="currentIndex === -1 || currentIndex === null"
                       @click="submitOrder"
            >确认挂号
            </el-button>
          </div>
        </template>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
// import UserInfo from './user-info.vue'
//引入获取就诊人信息接口
import {reqGetUser, reqGetDoctor} from "@/api/hospital";
import {reqSubmitOrder} from "@/api/user";
import {useRoute, useRouter} from "vue-router";
//@ts-ignore
import {ElMessage} from "element-plus";

const route = useRoute();
const router = useRouter();
//存储全部就诊人信息
const userArr = ref([]);
//存储医生的信息
const docInfo = ref({});
const descriptionsData = [
  {icon: 'AlarmClock', label: '就诊日期：', content: '2025年2月19日'},
  {icon: 'OfficeBuilding', label: '就诊医院：', content: '北京人民医院'},
  {icon: 'MapLocation', label: '就诊科室：', content: '心外科'},
  {icon: 'Avatar', label: '医生姓名：', content: '黎深', tag: true},
  {icon: 'TrophyBase', label: '医生职称：', content: '主任医师'},
  {icon: 'Operation', label: '医生专长：', content: '心脏病、多发性心脏类疾病'},
  {icon: 'WalletFilled', label: '医生服务费：', content: '￥100', style: {color: '#f89258'}}
];
// 存储就诊人的索引值
const currentIndex = ref(-1);


//组件挂载完毕获取数据
onMounted(() => {
  //获取就诊人信息
  fetchUserData();
  //获取医生信息
  fetchInfo();
});

//点击切换就诊人
const changeIndex = (index) => {
  if (currentIndex.value === index) {
    // 如果已经选择了当前索引，则取消选择
    currentIndex.value = null;
  } else {
    // 如果选择了新的索引，则更新为新索引
    currentIndex.value = index;
  }
};

//获取就诊人信息
const fetchUserData = async () => {
  const res = await reqGetUser();
  if (res.code === 200) {
    //将就诊人信息赋值给UserInfo组件
    userArr.value = res.data;
  } else {
    ElMessage.error(res.message);
  }
};

//获取医生信息
const fetchInfo = async () => {
  const res = await reqGetDoctor(route.query.docId);
  if (res.code === 200) {
    console.log(res.data, '医生信息');
    //将医生信息赋值给docInfo
    docInfo.value = res.data;
  } else {
    ElMessage.error(res.message);
  }
};

//确认挂号信息
const submitOrder = async () => {
  const hoscode = route.query.hoscode;
  const scheduleId = docInfo.value.id || 'undefined';
  const patientId = userArr.value[currentIndex.value].id;
  console.log('提交订单', hoscode, scheduleId, patientId);
  const res = await reqSubmitOrder(hoscode, scheduleId, patientId);
  if (res.code === 201) {
    // 跳转用户中心
    await router.push({
      path: '/user/orders',
      // query: {orderId:res.code }
    });
    ElMessage.success('提交成功');
  } else {
    ElMessage.error(res.message);
  }
  console.log(res);
}

//添加就诊人
const goToAddUser = () => {
  router.push({
    path: '/user/patients',
    query: {
      type: 'add'
    }
  });
}

</script>


<style scoped lang="scss">
.register-2 {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 15px;

  h1 {
    font-size: 24px;
    color: #7f7f7f;
    margin-top: 20px;
  }

  .card-1 {
    margin-top: 20px;

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 18px;
      font-weight: bold;
      color: #7f7f7f;

    }

    .userinfo {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .user-item {
        width: 31%;
        height: 400px;
        margin:10px 5px;
      }
    }
  }

  .card-2 {
    margin-top: 20px;

    span {
      font-size: 18px;
      font-weight: bold;
      color: #7f7f7f;
    }

    .card-table {
      margin-bottom: 5px;
    }

    .btn {
      display: flex;
      justify-content: center;

      .el-button {
        width: 30%;
      }
    }
  }
}

</style>